<!-- 
  watch
  作用: 监视数据的变化(和vue2中的watch作用一致)
  特点: Vue3中的warch只能监视以下四种数据.
    1. ref定义的数据
    2. reactive定义的数据
    3. 函数返回的一个值(getter函数)
    4. 一个包含上述内容的数组. 
-->
<!-- Vue3 语法 -->
<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
<script>
export default {
  name: "Person",
};
</script>
<script setup name="Person">
import { ref, watch } from "vue";
let sum = ref(0);
function changeSum() {
  sum.value += 1;
}
</script>

<style>
li {
  font-size: 20px;
}
button {
  margin: 0 5px;
}
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>
